<template>
	<view class="x-datetime" style="position: relative;">

		<x-cell :border="props.border">
			<template #icon>
				<slot name="icon"></slot>
			</template>

			<template #title>
				<view :style="{width: labelWidth}" class="x-row" style="position: relative;">
					<view style="width: 12rpx;color: red;position: absolute;left: -20rpx;top: 4rpx">
						<text v-if="required">*</text>
					</view>
					<view class="x-label">{{label}}</view>
				</view>
			</template>

			<template #value>
				<view class="control" :style="{width: 'calc(100% - ' + labelWidth + '})'}">
					<uni-datetime-picker @change="onChange" :hide-second="hideSecond" :disabled="disabled" :return-type="returnType" v-model="curValue" :type="type"
						:border="false" :start="startTime" :end="endTime" :clear-icon="false" />
				</view>
			</template>

		</x-cell>
	</view>
</template>

<script>
export default {
  options: {
    styleIsolation: 'shared'
  },
}
</script>
<script setup name="x-datetime">
	import XCell from '@/components/lib/cell';
	import {
		defineComponent,
		onMounted,
	} from 'vue';

	const props = defineProps({
		label: String,
		labelWidth: {
			type: String,
			default: "180rpx"
		},
    hideSecond:{
      type: Boolean,
      default: false,
    },
		modelValue: {
			type: [String, Number, Date, Array],
			default: "",
		},
		placeholder: {
			type: String,
			default: "请选择"
		},
		textAlign: {
			type: String,
			default: 'right'
		},
    border: {
      type: Boolean,
      default: true
    },
		required: {
			type: Boolean,
			default: false,
		},
		suffixIcon: {
			type: String,
			default: "right",
		},

		type: {
			type: String,
			default: "datetime"
		},
		startTime: {
			type: [String, Number, Date],
			default: ''
		},
		endTime: {
			type: [String, Number, Date],
			default: ''
		},
		returnType: {
			type: String,
			default: "date",
		},
		disabled: {
			type: Boolean,
			default: false
		}
	});

	const emit = defineEmits([
		'update:modelValue',
		'onChange'
	])

	let curValue = ref(null);

	const onChange = (date) => {
	  emit('onChange', date);
  }

	onMounted(() => {
		setValue(curValue.value);
	})

	watch(() => props.modelValue, (value) => {
		setValue(value);
	})

	watch(curValue, (value) => {
		emit("update:modelValue", value);
	})

	const setValue = (value) => {
		nextTick(() => {
			//  if(! this.Helper.empty(value)) {
			//    //todo 适配
			// if(typeof value == 'string') {
			//   let isUtc = false;
			//   if(value.indexOf("T") > -1) {
			// 	value = value.replace("T", " ");
			// 	value = value.substr(0, value.indexOf("."));
			// 	isUtc = true;
			//   }

			//   if(this.returnType != 'string') {
			// 	value = new Date(Date.parse(value.replace(/-/g, "/"))).getTime();
			// 	if(isUtc) {
			// 	  value = value + 8 * 3600 * 1000;
			// 	}

			//   }
			// } else if(typeof value == 'number') {
			// 	if(this.returnType == 'string') {
			// 	  value = this.Helper.formatDate(new Date(value));
			// 	}
			// }
			//  }

			curValue.value = value;
		})
	}
</script>

<style scoped lang="less">
	.control {
		text-align: right;
	}

	::v-deep .uni-date-x {
		display: flex;
		flex-direction: row-reverse;
		padding: 0;
		//不知道哪里设置了黑体
		color: #000;
	}

	::v-deep .uni-icons {
		color: #2A62C6 !important;
	}

	::v-deep .uni-date__x-input {
		padding: 0 6rpx;
		color: #999;
	}
</style>
